<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
	padding: 0;
	margin: 0;
    }
    .daohang{
        color: #6c6c6c;
	    font-size: 12px;
	    line-height: 35px;
	    padding: 0 6px;
        text-decoration: none;
    }
    .xiala{
        width: 10px;
        height: 10px;
    }
    body{
        width: 100%;
        height: 100%;
        background-color: #fcf4f4;
    }
    .top{
        width: 100%;
        height: auto;
    }
    .top-left{
        float: left;
    }
    .dl{
        color: crimson;
        font-size: 12px;
        text-decoration: none;
    }
    .top-right{
        float: right;
    }
    .top-right-1{
        float: right;
        margin-left: 700px;
    }
    .search{
        width: 100%;
        height: 100px;
        padding-top: -4px;
	    background-color: #613621;
    }
</style>
<body>
    
		<div class="top">
        <div class="top-left">
			<ul class="top-left-1">
				<li class="top-left">
					<span class="daohang">中国大陆</span>
					<img src="下 拉.png" alt="" class="xiala">
				</li>
				<li class="top-left">
					<a href="#" class="dl">亲，请登录</a>
					<a href="#" class="daohang">免费注册</a>
					</li>
				<li class="top-left">
					<a href="#" class="daohang">手机逛淘宝</a>
			    </li>
			</ul>
			<ul class="top-right-1">
				<li class="top-right">
					<a href="#" class="daohang">我的淘宝</a>
					<img src="下 拉.png" alt="" class="xiala">
			    </li>
				<li class="top-right">
					<a href="#"><img src="购物车.png" alt="" class="xiala"><span class="daohang">购物车</span><span style="color: red;font-size: 12px;">0</span></a>
                        <img src="下 拉.png" alt="" class="xiala">
					</li>
					<li class="top-right">
						<a href="#">
						<img src="收藏夹.png" alt="" class="xiala">
						<span class="daohang">收藏夹</span>
						</a>
						<img src="下 拉.png" alt="" class="xiala">
			</li>
				<li class="top-right">
						<a href="#"class="daohang">商品分类</a>
				</li>
				<li class="top-right">
						<span class="daohang">|</span>
				</li>
				<li class="top-right">
						<a href="#"class="daohang">卖家中心</a>
						<img src="下 拉.png" alt="" class="xiala">
				</li>
				<li class="top-right">
						<a href="#" class="daohang">联系客服</a>
						<img src="下 拉.png" alt="" class="xiala">
				</li>
				<li class="top-right">
						<a href="#">
                            <img src="下 拉.png" alt="" class="xiala">
						<span class="daohang">网站导航</span>
						</a>
				
                        <img src="下 拉.png" alt="" class="xiala">
					</li>
				</ul>
			</div>
		</div>
		<!-- 搜索区域 -->
		<div class="search">
			<div class="search-con">
				<div class="logo-box"></div>
				<div class="search-box">
					<div class="search-t">
						<div class="search-tab">
							<ul>
								<li class="select">宝贝</li>
								<li>天猫</li>
								<li>店铺</li>
							</ul>
						</div>
						<div class="search-panel">
							<a href="#" class="sousuo"></a>
							<form action="">
								<div class="btn">
				<button class="submit"><a href="商品详细/index.html"> <font color="#fff">搜索</font> </a></button>
								</div>
								<div class="search-inp-box">
									<div class="search-inp">
										<!-- placeholder为灰色字体 -->
										<input type="text" name="" placeholder="食用油非转基因">
									</div>
								</div>
							</form>
							<a href="#" class="camera"></a>
						</div>
					</div>
					<div class="search-bl">
						<a href="#" class="active">新款连衣裙</a>
						<a href="#">四件套</a>
						<a href="#">潮流T恤</a>
						<a href="#">时尚女鞋</a>
						<a href="#" class="active">短裤</a>
						<a href="#">半身裙</a>
						<a href="#">男士外套</a>
						<a href="#">墙纸</a>
					</div>
				</div>
				<div class="code-box">
					<a href="#" class="phone">手机淘宝</a>
					<a href="#" class="code"></a>
					<a href="#" class="close">X</a>
				</div>
			</div>
		</div>
		<!-- 导航条 -->
		<div class="screen-nav">
			<div class="screen-nav-con">
				<h2>主题市场</h2>
				<ul>
					<li><a href="#">天猫</a></li>
					<li><a href="#">聚划算</a></li>
					<li><a href="#">天猫超市</a></li>
				</ul>	
				<ul>
					<li><a href="#">|</a></li>
					<li><a href="#">淘抢购</a></li>
					<li><a href="#">电器城</a></li>
					<li><a href="#">司法拍卖</a></li>
					<li><a href="#">淘宝心选</a></li>
					<li><a href="#">兴农扶贫</a></li>
				</ul>
				<ul>
					<li><a href="#">|</a></li>
					<li><a href="#">飞猪旅行</a></li>
					<li><a href="#">智能生活</a></li>
					<li><a href="#">苏宁易购</a></li>
					<li><a href="#"><img src="img/小导航图.gif"/></a></li>
				</ul>
			</div>
		</div>
		
		
		<!-- 图片主体展示部分 -->
		<div class="screen-box">
			<div class="main">
				<div class="main-inner">
					<div class="inner-left">
						<ul>
						<div id="box11">
							<li class="">
								<a href="商品详细/index.html">女装</a> /
								<a href="商品详细/index.html">男装</a> /
								<a href="#">内衣</a>
								<div id="box22">
				                  <a href="商品详细/index.html"> <img src="图片/分类1.png"/></a>
				                </div>
							 	
								 
							</li>
						</div>		
						<div id="box111"> 
							<li>
								<a href="#">鞋靴</a> /
								<a href="#">箱包</a> /
								<a href="#">配件</a>
						        <div id="box222">
				                   <img src="图片/分类2.png"/>
				                </div>
						 	</li>
						</div>	
						
						
						<div id="box4"> 
							<li>
								<a href="#">童装玩具</a> /
								<a href="#">孕产</a> /
								<a href="#">用品</a>
								<div id="box44">
				                   <img src="图片/分类3.png"/>
				                </div>
						</div>
							</li>
							<li>
								<a href="#">家电</a> /
								<a href="#">手机</a> /
								<a href="#">数码</a>
								<span></span>
							</li>
							<li>
								<a href="#">美妆</a> /
								<a href="#">洗肤</a> /
								<a href="#">保养品</a>
								<span></span>
							</li>
							<li>
								<a href="#">珠宝</a> /
								<a href="#">眼睛</a> /
								<a href="#">手表</a>
								<span></span>
							</li>
							<li>
								<a href="#">运动</a> /
								<a href="#">户外</a> /
								<a href="#">乐器</a>
								<span></span>
							</li>
							<li>
								<a href="#">游戏</a> /
								<a href="#">动漫</a> /
								<a href="#">影频</a>
								<span></span>
							</li>
							<li>
								<a href="#">美食</a> /
								<a href="#">生鲜</a> /
								<a href="#">零食</a>
								<span></span>
							</li>
							<li>
								<a href="#">鲜花</a> /
								<a href="#">宠物</a> /
								<a href="#">农资</a>
								<span></span>
							</li>
							<li>
								<a href="#">工具</a> /
								<a href="#">装修</a> /
								<a href="#">建材</a>
								<span></span>
							</li>
							<li>
								<a href="#">家具</a> /
								<a href="#">家饰</a> /
								<a href="#">家访</a>
								<span></span>
							</li>
							<li>
								<a href="#">汽车</a> /
								<a href="#">二手车</a> /
								<a href="#">用品</a>
								<span></span>
							</li>
							<li>
								<a href="#">办公</a> /
								<a href="#">GIY</a> /
								<a href="#">五金电子</a>
								<span></span>
							</li>
							<li>
								<a href="#">百货</a> /
								<a href="#">餐厨</a> /
								<a href="#">家庭保健</a>
								<span></span>
							</li>
							<li>
								<a href="#">学习</a> /
								<a href="#">卡券</a> /
								<a href="#">本地服务</a>
								<span></span>
							</li>
						</ul>
					</div>
					<!--轮播图-->
					<div class="inner-content">
		            <div id="box1">
		                </div>
		


						<div class="inner-mall">
							<div class="head">
								<img src="./img/tm.png" alt="">
								<span class="tm">理想生活上天猫
								</span>
								<a href="#">
									<img src="./img/pic3.png" alt="">
								</a>
							</div>
						</div>
					</div>
					<div class="inner-right">
						<a href="#">
							<img src="./img/pic1.png" alt="">
						</a>
						<div class="hot">
							<span>今日热卖</span>
							<a href="#">
								<img src="./img/pic4.png" alt="">
							</a>
						</div>
					</div>
				</div>
				<!--淘宝头条里面东西-->
				<div class="main-bottom">
					<div class="content">
						<div class="logo-box"></div>
						<a href="#">
							<img src="./img/pic5.png">
							<h4>扦插花卉不生根？教你3分钟学“高压”</h4>
							<p>喜欢养花的人越来越多，想必很多花友经常会去花店或者花卉市场买一些绿植盆栽养在家里，当然随着养花的经验越来越足。</p>
						</a>
					</div>
				</div>
			</div>
			<!--网页里面登录 注册 等-->
			<div class="col-right">
				<div class="member">
					<div class="member-head">
						<div class="head">
							<a href="#"></a>
						</div>
						<span class="info">hi!您好</span>
						<p>
							<a href="#" class="icon">
								<span></span>
								领淘金币抵钱
							</a>
							<a href="#" class="club">
								<span></span>
								会员俱乐部
							</a>
						</p>
					</div>
					<div class="member-foot">
						<a href="登录.html" class="login">登录</a>
						<a href="注册.html">注册</a>
						<a href="#">开店</a>
					</div>
				</div>
				<div class="message">
					<a href="#">网上有害信息举报
						<span></span>
					</a>
				</div>
				<div class="notice">
					<div class="title">
						<ul>
							<li><a href="#">公告</a></li>
							<li><a href="#">规则</a></li>
							<li><a href="#" class="active">论坛</a></li>
							<li><a href="#">安全</a></li>
							<li><a href="#">公益</a></li>
						</ul>
					</div>
					<div class="content">
						<ul>
							<li><a href="#" class="active">阿里88VIP群益在升级</a></li>
							<li><a href="#">飞猪加入阿里生活圈</a></li>
							<li><a href="#">天猫上线轻松换</a></li>
							<li><a href="#">盲盒背后的千万级市场</a></li>
						</ul>
					</div>
				</div>
				<div class="module">
					<ul>
						<li>
							<a href="#">
								<span class="icon1"></span>
								<p>冲话费</p>
							</a>
						</li>
						<li>
							<a href="#">
								<span class="icon2"></span>
								<p>旅行</p>
							</a>
						</li>
						<li>
							<a href="#">
								<span class="icon3"></span>
								<p>车险</p>
							</a>
						</li>
						<li>
							<a href="#">
								<span class="icon4"></span>
								<p>游戏</p>
							</a>
						</li>
						<li>
							<a href="#">
								<span class="icon5"></span>
								<p>彩票</p>
							</a>
						</li>
						<li>
							<a href="#">
								<span class="icon6"></span>
								<p>电影</p>
							</a>
						</li>
						<li>
							<a href="#">
								<span class="icon7"></span>
								<p>酒店</p>
							</a>
						</li>
						<li>
							<a href="#">
								<span class="icon8"></span>
								<p>理财</p>
							</a>
						</li>
						<li>
							<a href="#">
								<span class="icon9"></span>
								<p>找服务</p>
							</a>
						</li>
						<li>
							<a href="#">
								<span class="icon10"></span>
								<p>演出</p>
							</a>
						</li>
						<li>
							<a href="#">
								<span class="icon11"></span>
								<p>水煤电</p>
							</a>
						</li>
						<li>
							<a href="#">
								<span class="icon12"></span>
								<p>火车票</p>
							</a>
						</li>
					</ul>
				   </div>
				   
				   <!--阿里APP小应用-->
	                <div class="ali"> 
	                	
	                	<h4 class="zt">阿里App
	                		<a href="#" class="many">更多></a>
	                	</h4> 
	               <ul> 
	                <li><a href="#">
	                	<img src="tb.png" class="tp" alt="" /></a>
	                	
				   
                   </div>
			    </div>
		  
		</div>
</body>
</html>